<template>
  <div class="">
    <navbar></navbar>
    <div @click="clickTest">test</div>
    <div class="editor-container">
      <!-- 组件栏 -->
      <component-list></component-list>
      <!-- 预览区 -->
      <preview-panel
        :value="rootData"
        :select-key="selectKey"
        @value-change="handleValueChange"
        @select-change="handleSelectChange"
      ></preview-panel>
      <!-- 编辑栏 -->
      <config-panel
        :value="rootData[selectKey]"
        :currentItem="currentItem"
      ></config-panel>
    </div>
  </div>
</template>
<script>
import Navbar from "./components/Navbar";
import ComponentList from "./components/ComponentList";
import PreviewPanel from "./components/PreviewPanel";
import ConfigPanel from "./components/ConfigPanel2";
export default {
  components: {
    Navbar,
    ComponentList,
    PreviewPanel,
    ConfigPanel,
  },
  data() {
    return {
      editorData: {}, // 编辑区json
      rootData: {}, // 总json
      initData: "", // 初始json
      selectParent: "",
      selectKey: null,
      itemMap: {},
    };
  },
  computed: {
    currentItem() {
      return this.itemMap[this.selectKey] || {};
    },
  },
  methods: {
    handleValueChange(data) {
      this.rootData = data;
      this.editorData = this.selectKey
        ? // ? { ...this.deepCopy() }
          {}
        : { ...this.deepCopy(data) };
      this.changeItemList();
    },
    handleSelectChange({ value, key }) {
      this.selectKey = key;
    },
    changeItemList() {
      let keys = Object.keys(this.rootData);
      keys.forEach((item) => {
        if (!this.itemMap[item]) {
          const { type, configJson } = this.rootData[item];

          this.$set(this.itemMap, item, {
            id: item,
            type,
            dataJson: this.getItemJson(configJson),
          });
        }
      });
    },
    getItemJson(configJson = []) {
      let json = {};
      configJson.map((item) => {
        json[item.name] = item.defaultValue;
      });
      return json;
    },
    clickTest() {
      this.itemMap[this.selectKey].dataJson.rule = 2;
      // console.log(999, this.itemMap[this.selectKey]);
    },

    /** 通用方法 */
    deepCopy(data) {
      return JSON.parse(JSON.stringify(data));
    },
  },
};
</script>
<style lang="less" scoped>
.editor-container {
  display: flex;
  height: calc(100vh - 60px);
}

// .draggable-container {
//   flex: 1;
//   max-height: 100%;
//   background: #fff;
//   width: 100%;
//   overflow: auto;
//   padding: 10px;
//   border: 1px solid #d9d9d9;

//   .conf-detail__container {
//     display: block;
//     min-height: 200px;
//     overflow: auto;
//   }
// }
</style>
